<template>
  <div class="budgetList">
    <!-- 公用表头组件 -->
    <el-card class="box-card">
      <CommonForm />
    </el-card>
    <!-- 公共导航 -->
    <el-card>
      <NavTab />
    </el-card>
    <!-- <Forms :list="pageSetting" /> -->
    <el-card class="box-card">
      <div class="text item">
        <div style="margin-bottom: 30px">
          <div :disabled="disabledBtn" style="display: flex; justify-content: flex-end; margin-bottom: 16px">
            <el-button style="background-color: #ff8c00; color: #fff" @click="handleListProgress">
              <i class="ri-time-fill" />
              清单进度情况
            </el-button>
            <el-button style="color: #fff" type="primary" @click="handledialogVisible">
              <i class="ri-download-cloud-fill" />
              下载预算清单
            </el-button>
          </div>
          <el-table
            border
            :cell-style="{ textAlign: 'center' }"
            :data="typeList"
            :header-cell-style="{ textAlign: 'center' }"
            highlight-current-row
            style="width: 50%"
          >
            <el-table-column label="费用类目" prop="lable" width="270" />
            <el-table-column label="费用金额" width="200">
              <template #default="scope">
                <span>{{ Math.floor(scope.row.value * 100) / 100 }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 表格-->
        <el-table
          border
          :cell-style="{ textAlign: 'center' }"
          :data="tableData"
          :header-cell-style="{ textAlign: 'center' }"
          highlight-current-row
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column label="设备编号" prop="EQUIPMENT_ID" width="100" />
          <el-table-column label="设备类型" prop="EQUIPMENT_TYPE" width="150" />
          <el-table-column label="数量" prop="QTY" width="120" />
          <el-table-column label="单位" prop="UNITS" width="120" />
          <el-table-column label="是否利旧" prop="OLD_WHETHER" width="120">
            <template #default="scope"><el-switch v-model="scope.row.OLD_WHETHER" active-value="Y" disabled inactive-value="N" /></template>
          </el-table-column>

          <el-table-column label="长(固定端)(mm)" prop="LENGTH" width="120" />
          <el-table-column label="有效宽度(mm)" prop="WIDTH" width="180" />
          <el-table-column label="高度(mm)" prop="HEIGHT" width="120" />
          <el-table-column label="爬坡带直段(mm)" prop="CLIMB_LENGTH" width="200" />
          <el-table-column label="分拣流向" prop="SORTING_FLOW" width="120" />
          <el-table-column label="伸缩长度" prop="FLEX_LENGTH" width="120" />
          <el-table-column label="线速度(m/min)" prop="LINEAR_VELOCITY" width="120" />
          <el-table-column label="电机功率(KW)" prop="MOTOR_POWER" width="150" />
          <el-table-column label="输送带型号" prop="CONVEYOR_MODEL" width="300" />
          <el-table-column label="就地单击电器控制装置类型" prop="type" width="400" />
          <el-table-column label="维修平台面积(平方)" prop="PLATFORM_AREA" width="350" />
          <el-table-column label="电机价格(不含税)" prop="MOTOR_PRICE" width="350" />
          <el-table-column label="皮带价格(不含税)" prop="BELT_PRICE" width="350" />
          <el-table-column label="变频器价格(不含税)" prop="FREQUENCY_PRICE" width="350" />
          <el-table-column label="驱动段(不含税)" prop="DRIVE_SEGMENT_PRICE" width="350" />
          <el-table-column label="中间段(不含税)" prop="MIDDLE_SEGMENT_PRICE" width="350" />
          <el-table-column label="头尾段(不含税)" prop="HEAD_TAIL_PRICE" width="350" />
          <el-table-column label="单独维修平台(不含税)" prop="SOLE_MAINTAIN_PRICE" width="350" />
          <el-table-column label="通常维修平台(不含税)" prop="COM_MAINTAIN_PRICE" width="350" />
          <el-table-column label="支腿(不含税)" prop="LEG_PRICE" width="350" />
          <el-table-column label="挡板(不含税)" prop="BAFFLE_PRICE" width="350" />
          <el-table-column label="底封网(不含税)" prop="UNDERSEAL_NET_PRICE" width="350" />
          <el-table-column label="单机电控(不含税)" prop="SINGLE_CONTROL_PRICE" width="350" />
          <el-table-column label="整机价格(不含税)" prop="WHOLE_PRICE" width="300" />
          <el-table-column label="安装调试费用" prop="INSTALLA_TRIAL_PRICE" width="300" />
          <el-table-column label="合计(不含税)" prop="TOTAL_TAX_EXCLUDEPRICE" width="300" />
          <el-table-column label="备注" prop="NOTES" width="300" />
          <el-table-column label="供货范围" prop="SCOPESUPPLY" width="300" />
        </el-table>
      </div>
    </el-card>
    <!-- 清单进度情况模态框 -->
    <el-dialog v-model="dialogListProgress" :title="title" width="80%">
      <SchedluleDialog v-if="dialogListProgress" :single-end-id="$store.getters['bqmsData/budgetSheetNum']" @queryCallback="queryCallback" />
    </el-dialog>
  </div>
</template>

<script>
  import CommonForm from '@/project/bqms/components/ComTable.vue'
  import SchedluleDialog from '../components/SchedluleDialog.vue'
  import { defineComponent } from 'vue'
  import { getList, download } from '../api/home.js'
  import NavTab from '@/project/bqms/components/NavTab.vue'
  import { GFCD } from '@/utils/utils'
  export default defineComponent({
    name: 'BudgetList',
    components: {
      CommonForm,
      SchedluleDialog,
      NavTab,
    },
    data() {
      return {
        disabledBtn: false,
        disabled: true,
        multipleSelection: [],
        typeList: [
          {
            lable: '集中控制费用',
            key: 'CENTRALIZED_PRICE',
            value: '',
          },
          {
            lable: '合同备件',
            key: 'TOTAL_PRICE',
            value: '',
          },
          {
            lable: '现场费用',
            key: 'FIELD_COST',
            value: '',
          },
          {
            lable: '合同保驾',
            key: 'CONTRACT_COST',
            value: '',
          },
          {
            lable: '质保费用',
            key: 'WARRANTY_COST',
            value: '',
          },
          {
            lable: '运输费用',
            key: 'TRANSPORT_COST',
            value: '',
          },
          {
            lable: '利旧费用',
            key: 'OLD_COST',
            value: '',
          },
        ],
        title: '',
        dialogListProgress: false,
        motorSelection: true,
        dialogVisible: false,
        percentage: true,
        btn: true,
        show: false, //模态框显示
        code: '',
        form: {
          equipment_num: '',
          equipment_type: '',
        },
        timer: null, //定时器名称
        //分页数据
        pageInfo: {
          '#LIMIT#': 1,
          '#PAGE_SIZE#': 9999,
          DOCNO: '01112321232',
          EQUIPMENT_ID: '234535',
          TYPE_ID: '243534',
        },
        tableInfo: [],
        tableData: [],
        ruleForm: {},
        options: [],
        configSetting: {},
        ListNo: '',
      }
    },
    created() {
      if (this.motorSelection) {
        console.log('created')
        this.motorSelection = false
      }
      this.getTableHeaderData() //头部数据
      this.getTableCommissionQuery() //尾部表格数据
    },
    methods: {
      queryCallback(time) {
        let timestamp = new Date().getTime()
        let time_ = timestamp - new Date(time).getTime()
        let titleTime = this.getNowFormatDate(time_)
        this.title = '清单进度汇总情况（截止目前总耗时：' + titleTime + '）'
      },
      getNowFormatDate(time) {
        let second = parseInt(time / 1000) % 60
        let minute = parseInt(parseInt(time / 1000) / 60) % 60
        let hour = parseInt(parseInt(time / 1000) / 60 / 60) % 60
        return (hour < 10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
      },
      //头部表格
      getTableHeaderData() {
        this.configSetting = GFCD('bqms')
        let method = 'bqms.budget.sheet.header.query'
        getList(`${this.configSetting.domain}${this.configSetting.baseUrl}`, {
          method: method,
          data: JSON.stringify({
            DOCNO: this.$store.getters['bqmsData/budgetSheetNum'],
            '#LIMIT#': 1,
            '#PAGE_SIZE#': 9999,
          }),
        }).then((res) => {
          if (res.code == '00000') {
            // this.$message({
            //   message: res.msg,
            //   type: 'success',
            // })
            this.tableInfo = res.data[method].data[0]
            this.typeList.forEach((row) => {
              row.value = this.tableInfo[row.key]
            })
            console.log('预算清单头部表格数据res', this.typeList)
          } else {
            this.$message({ type: 'error', message: res.msg })
          }
        })
      },
      //尾部表格
      getTableCommissionQuery() {
        this.configSetting = GFCD('bqms')
        let method = 'quotationServiceImpl.query'
        getList(`${this.configSetting.domain}${this.configSetting.baseUrl}`, {
          method: method,
          data: JSON.stringify({
            DOCNO: this.$store.getters['bqmsData/budgetSheetNum'],
            '#LIMIT#': 1,
            '#PAGE_SIZE#': 9999,
            OUT_SOURCE: 'N',
            VERSION: this.$store.getters['bqmsData/HeaderTable'].VERSION,
          }),
        }).then((res) => {
          if (res.code == '00000') {
            if (res.data.length == 0) {
              this.$message({
                message: '此订单号暂无表格数据,请上传！！！',
                type: 'warning',
              })
              this.disabledBtn = true
            } else {
              this.disabledBtn = false
              this.tableData = res.data
            }
            console.log('预算清单表格尾部数据res', res.data)
          } else {
            this.$message({ type: 'error', message: res.msg })
          }
        })
      },
      //打开
      handledialogVisible() {
        // this.dialogVisible = true
        this.configSetting = GFCD('bqms')
        let method = 'bqms.file.export'
        download(`${this.configSetting.domain}${this.configSetting.baseUrl}`, {
          method: method,
          data: JSON.stringify({
            DOCNO: this.$store.getters['bqmsData/budgetSheetNum'],
            '#PAGE_SIZE#': '999999',
            '#LIMIT#': '1',
          }),
        }).then((res) => {
          let blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let reader = new FileReader()
          reader.readAsDataURL(blob) // 转换为base64，可以直接放入a标签href
          reader.onload = (e) => {
            let a = document.createElement('a')
            a.download = '预算清单汇总.xlsx'
            a.href = e.target.result
            a.click()
          }
          console.log('预算清单汇总', res)
        })
      },
      //关闭
      handleClose(done) {
        console.log('done', done)
        this.dialogVisible = false
      },
      //进度清单
      handleListProgress() {
        this.dialogListProgress = true
      },
      //发布数据
      handlePublishData() {
        console.log('发布数据！！！')
      },
      //查询
      handleQuery() {
        console.log('submit!查询！！！')
      },
      //重置
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      //电机选择
      handleClick(row) {
        console.log('电机选择row', row)
        this.show = !this.show
      },
      // 保存
      handleSure(row) {
        console.log('保存row', row)
      },
      //选中
      handleSelectionChange(val) {
        this.multipleSelection = val
        console.log('选中行--val', val)
      },
    },
  })
</script>

<style lang="scss" scoped>
  .budgetList {
    width: calc(100% - 40px) !important;
    padding: 20px !important;
    background-color: #fff;
  }
  .num_input {
    width: 210px !important;
  }
  .has-gutter {
    font-weight: bold !important;
    background-color: #f5f5f5 !important;
  }
</style>
